"""
@author: 高姚霞
@date: 2020-07-31 18:34:31
"""
<!-- 渠道指数页 -->
<template>
  <div class="channel_index">
    <div class="channel-header-content">
      <div class="channel-header">
        <img src="../../../assets/images/channelIndex/map-ico.png" alt />
        <div class="channel-select">
          <a-select
            style="width: 90px;"
            @change="(value) =>handleChange('proType', value)"
            v-model="select"
            dropdownClassName="select-dropdown"
          >
            <a-icon slot="suffixIcon" type="caret-down" />
            <a-select-option v-for="item in selectList" :key="item" :value="item">{{item}}</a-select-option>
          </a-select>
        </div>
        <div class="channel-top">
          <span>时间范围</span>
          <div style="display: inline" class="radio-group">
            <a-radio-group
              v-model="cycleType"
              name="radioGroup"
              class="time-radio-group"
              @change="(e) =>handleChange('cycleType', e.target.value)"
            >
              <a-radio :value="1">近一周</a-radio>
              <a-radio :value="2">近一月</a-radio>
              <a-radio :value="3">近半年</a-radio>
              <a-radio :value="4">自定义</a-radio>
            </a-radio-group>
            <!-- 如果是自定义，显示日期插件 -->
          </div>
          <a-range-picker v-if="cycleType == 4" v-model="ranges" @change="onChange" separator="至" />
        </div>
      </div>
    </div>

    <div class="channel-content">
      <!-- 官方门户 官方媒体  主流媒体  自媒体 -->
      <div class="div-radio-button">
        <a-radio-group
          v-model="channelType"
          button-style="solid"
          @change="(e) =>handleChange('channelType',e.target.value)"
        >
          <a-radio-button :value="1">官方门户</a-radio-button>
          <a-radio-button :value="2">官方媒体</a-radio-button>
          <a-radio-button :value="3">主流媒体</a-radio-button>
          <a-radio-button :value="4">自媒体</a-radio-button>
        </a-radio-group>
      </div>
      <!-- 渠道类别事件分布 -->

      <div class="div-title">
        <span class="title">渠道类别事件分布</span>
        <span class="tip">（提示：点击类别圆环，其他内容联动刷新）</span>
      </div>
      <!-- 环状图 -->
      <circuitEcharts
        title
        height="232px"
        width="100%"
        id="circuitEchart"
        :data="cirEchartData"
        @clickFuc="(params) => cirEchartClick(params)"
      ></circuitEcharts>
      <!-- 图表 -->
      <div class="table-list">
        <a-row :gutter="24">
          <a-col :span="14" style=" width:682px;">
            <a-card :bordered="false" class="card-shadow" style="width: 100%; height:334px;">
              <sectionTitle titleName="站点情绪分布" des style="paddingBottom: 0px">
                <slot>
                  <img src="../../../assets/images/channelIndex/emotion-ico.png" alt />
                </slot>
              </sectionTitle>
              <bargraphEcharts
                id="bargraphEchart"
                :data="siteMoodData"
                @getSiteMoodData="getSiteMoodData()"
              ></bargraphEcharts>
            </a-card>
          </a-col>
          <a-col :span="10" style="width:516px; marginLeft: 12px">
            <a-card :bordered="false" class="card-shadow" style="width: 100%; height:334px;">
              <sectionTitle titleName="渠道类别事件趋势" des>
                <slot>
                  <img src="../../../assets/images/channelIndex/calendar-ico.png" alt />
                </slot>
              </sectionTitle>
              <lineEcharts
                id="lineEchart"
                width="100%"
                height="244px"
                :smooth="true"
                :xAxisData="channelXAxis"
                :data="channelData"
              ></lineEcharts>
            </a-card>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="6" style="width:416px;">
            <a-card :bordered="false" class="card-shadow" style="width: 100%; height:272px;">
              <sectionTitle titleName="渠道热点词分布" des>
                <slot>
                  <img src="../../../assets/images/channelIndex/wordcloud-ico.png" alt />
                </slot>
              </sectionTitle>
              <wordcloud id="wordCloud" :data="hotWordsData" height="180px" width="99%" />
            </a-card>
          </a-col>
          <a-col :span="18" style="width:780px;">
            <a-card :bordered="false" class="card-shadow" style="width: 100%; height:272px; marginLeft: 12px">
              <sectionTitle titleName="热点事件" des="(Top50)" style="paddingBottom: 0px">
                <slot>
                  <img src="../../../assets/images/channelIndex/hotspot-ico.png" alt />
                </slot>
              </sectionTitle>
              <div style="overflow: hidden; position: relative; width: 100%">
                <div class="list-header">
                  <div>聚合度</div>
                  <div>评论数</div>
                  <div>点赞数</div>
                  <div>转发数</div>
                </div>
              </div>
              <a-spin :spinning="loading" tip="Loading...">
                <div class="hot-event-list">
                  <ul>
                    <li
                      v-for="(item,index) in hotEventList"
                      :key="item.id"
                      :class="{'first': index == 0,'second': index == 1,'third': index == 2}"
                    >
                      <span class="list-index">{{index+1}}</span>
                      <span class="event-name">
                        <a @click="goDetails(item.id)">{{item.eventName}}</a>
                      </span>
                      <span class="event-count">{{item.aa}}</span>
                      <span class="event-count">{{item.bb}}</span>
                      <span class="event-count">{{item.cc}}</span>
                      <span class="event-count">{{item.dd}}</span>
                    </li>
                  </ul>
                </div>
              </a-spin>
            </a-card>
          </a-col>
        </a-row>
      </div>
    </div>
  </div>
</template>

<script>
import moment from "moment";
import sectionTitle from "components/base/sectionTitle";
import circuitEcharts from "components/configuration/channelIndex/circuitEcharts";
import bargraphEcharts from "components/configuration/channelIndex/bargraphEcharts";
import wordcloud from "components/configuration/newsDetail/wordcloud";
import lineEcharts from "components/configuration/channelIndex/lineEcharts";
export default {
  components: {
    circuitEcharts,
    bargraphEcharts,
    wordcloud,
    sectionTitle,
    lineEcharts,
  },
  data() {
    return {
      loading: false,
      selectList: ["全国", "安徽省"],
      select: "全国",
      cycleType: 1,
      ranges: [moment().startOf("month"), moment()],
      channelType: 1,
      cirEchartData: [
        {
          value: 2,
          name: "经济",
        },
        {
          value: 8,
          name: "民生",
        },
        {
          value: 5,
          name: "交通",
        },
        {
          value: 4,
          name: "医疗",
        },
        {
          value: 6,
          name: "商业",
        },
        {
          value: 6,
          name: "教育",
        },
        {
          value: 5,
          name: "体育",
        },
        {
          value: 2,
          name: "文娱",
        },
        {
          value: 3,
          name: "法治",
        },
        {
          value: 6,
          name: "政务",
        },
      ],
      siteMoodData: [
        {
          name: "人民网1",
          positiveValue: 380,
          negativeValue: -210,
        },
        {
          name: "微博1",
          positiveValue: 290,
          negativeValue: -295,
        },
        {
          name: "人民网2",
          positiveValue: 380,
          negativeValue: -210,
        },
        {
          name: "微博2",
          positiveValue: 290,
          negativeValue: -295,
        },
        {
          name: "人民网3",
          positiveValue: 380,
          negativeValue: -210,
        },
        {
          name: "微博3",
          positiveValue: 290,
          negativeValue: -295,
        },
        {
          name: "人民网4",
          positiveValue: 380,
          negativeValue: -210,
        },
      ],
      channelXAxis: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
      channelData: [
        {
          name: "政治",
          data: [
            { name: "周一", value: 20 },
            { name: "周二", value: 20 },
            { name: "周三", value: 20 },
            { name: "周四", value: 20 },
            { name: "周五", value: 20 },
          ],
        },
        { name: "经济", data: [{ name: "周一", value: 20 }] },
        { name: "生态", data: [{ name: "周一", value: 20 }] },
      ],
      hotWordsData: [
        {
          name: "协会",
          value: 1,
        },
        {
          name: "社会",
          value: 10,
        },
        {
          name: "平台",
          value: 9,
        },
        {
          name: "生活",
          value: 7,
        },
        {
          name: "企业家",
          value: 5,
        },
        {
          name: "疫情",
          value: 6,
        },
        {
          name: "产业",
          value: 6,
        },
        {
          name: "生态",
          value: 6,
        },
        {
          name: "作用",
          value: 4,
        },
        {
          name: "清洁",
          value: 3,
        },
        {
          name: "清洁",
          value: 3,
        },
        {
          name: "能源",
          value: 2,
        },
        {
          name: "旅游",
          value: 2,
        },
        {
          name: "英雄",
          value: 2,
        },
        {
          name: "经济",
          value: 1,
        },
        {
          name: "渠道",
          value: 1,
        },
        {
          name: "渠道",
          value: 1,
        },
        {
          name: "资源",
          value: 1,
        },
        {
          name: "天然气",
          value: 1,
        },
        {
          name: "地球",
          value: 1,
        },
        {
          name: "动物",
          value: 1,
        },
        {
          name: "环保",
          value: 9,
        },
        {
          name: "来源",
          value: 8,
        },
        {
          name: "乡村",
          value: 7,
        },
      ],
      hotEventList: [
        {
          id: 1,
          eventName: "沧州主城区开放智能网联汽车沧州主城区开放...",
          aa: "20",
          bb: "10",
          cc: "10",
          dd: "50",
        },
        {
          id: 2,
          eventName: "沧州主城区开放智能网",
          aa: "20",
          bb: "10",
          cc: "10",
          dd: "50",
        },
        {
          id: 3,
          eventName: "沧州主城区开放智能网",
          aa: "20",
          bb: "10",
          cc: "10",
          dd: "50",
        },
        {
          id: 4,
          eventName: "沧州主城区开放智能网",
          aa: "20",
          bb: "10",
          cc: "10",
          dd: "50",
        },
        {
          id: 5,
          eventName: "沧州主城区开放智能网",
          aa: "20",
          bb: "10",
          cc: "10",
          dd: "50",
        },
      ],
      timer: null,
    };
  },
  methods: {
    goDetails(id) {
      const { href } = this.$router.resolve({
        path: `/console/configuration/newsDetail/index`,
        query: {
          id: id,
        },
      });
      window.open(href, "_blank");
    },
    handleChange(type, value) {
      console.log("type：", type);
      if (type === "proType") {
        //省份选择
        console.log("选择了省份为：", value);
      } else if (type === "cycleType") {
        //时间范围
        console.log("选择了时间范围为：", value);
      } else if (type === "channelType") {
        //渠道类别
        console.log("选择了渠道类别为：", value);
        this.refreshCirEchart();
      }
    },
    cirEchartClick(params) {
      // alert("点击了:"+ params.name);
      this.loading = true;
      console.log(params);
      /**点击后，有放大效果且其他图表内容同步刷新 */
      //更新站点图
      this.getSiteMoodData();
      //更新渠道趋势图
      this.getChannelData();
      //更新词云
      this.getHotWordsData();
      //更新热点事件
      this.getHotEventList();
    },
    refreshCirEchart() {
      this.loading = true;
      //更新站点图
      this.getSiteMoodData();
      //更新渠道趋势图
      this.getChannelData();
      //更新词云
      this.getHotWordsData();
      //更新热点事件
      this.getHotEventList();
      this.cirEchartData = [
        {
          value: 6,
          name: "经济",
        },
        {
          value: 8,
          name: "民生",
        },
        {
          value: 5,
          name: "交通",
        },
        {
          value: 4,
          name: "医疗",
        },
        {
          value: 6,
          name: "商业",
        },
        {
          value: 6,
          name: "教育",
        },
        {
          value: 5,
          name: "体育",
        },
        {
          value: 2,
          name: "文娱",
        },
        {
          value: 3,
          name: "法治",
        },
        {
          value: 6,
          name: "政务",
        },
      ];
    },
    getSiteMoodData() {
      console.log("更新了站点情绪分布图");
      //调获取站点情绪分布数据接口
      this.siteMoodData = [];
    },
    getChannelData() {
      //调获取渠道类别事件数据接口
      this.channelData = [];
    },
    getHotWordsData() {
      this.hotWordsData = [
        {
          name: "协会",
          value: 1,
        },
        {
          name: "社会",
          value: 10,
        },
        {
          name: "平台",
          value: 9,
        },
        {
          name: "生活",
          value: 7,
        },
        {
          name: "企业家",
          value: 5,
        },
        {
          name: "疫情",
          value: 6,
        },
        {
          name: "产业",
          value: 6,
        },
        {
          name: "生态",
          value: 6,
        },
        {
          name: "作用",
          value: 4,
        },
        {
          name: "清洁",
          value: 3,
        },
        {
          name: "清洁",
          value: 3,
        },
        {
          name: "能源",
          value: 2,
        },
        {
          name: "旅游",
          value: 2,
        },
        {
          name: "英雄",
          value: 2,
        },
        {
          name: "经济",
          value: 1,
        },
        {
          name: "渠道",
          value: 1,
        },
        {
          name: "渠道",
          value: 1,
        },
        {
          name: "资源",
          value: 1,
        },
        {
          name: "天然气",
          value: 1,
        },
        {
          name: "地球",
          value: 1,
        },
        {
          name: "动物",
          value: 1,
        },
        {
          name: "环保",
          value: 9,
        },
        {
          name: "来源",
          value: 8,
        },
        {
          name: "乡村",
          value: 7,
        },
      ];
    },
    getHotEventList() {
      this.timer = setTimeout(() => {
        this.loading = false;
      }, 500);
    },
    onChange(dates, dateStrings) {
      console.log("From: ", dates[0], ", to: ", dates[1]);
      console.log("From: ", dateStrings[0], ", to: ", dateStrings[1]);
    },
  },
  beforeDestroy() {
    clearTimeout(this.timer);
  },
};
</script>

<style lang="stylus" scoped>
.channel_index
  width 100%
  .channel-header-content
    background #ffffff
.channel-header
  width 1210px
  margin 0 auto
  height 54px
  background #ffffff
  margin-top -12px
  padding 12px 0px
  display flex
  align-items center
.channel-select
  margin-left 12px

.channel-top
  height 34px
  display flex
  align-items center
  span
    margin-left 30px
    font-size 16px
    color rgba(140, 140, 140, 1)
.channel-content
  width 1210px
  margin 0 auto
  .div-radio-button
    margin-top 8px
    margin-left 32px
  .div-title
    margin-top 34px
    .title
      color #037AFF
      font-size 18px
      font-weight 600
    .tip
      font-size 14px
      color FF7E00
  .table-list
    width 100%
  .card-shadow
    box-shadow: 0px 0px 10px 0px rgba(223, 224, 231, 0.76)
  .list-header
    float right
    height 30px
    width 324px
    display flex
    div
      font-size 16px
      flex 1
      text-align center
    background #F1F2F6
    align-items center
  .hot-event-list
    li
      color #333
      margin-bottom 8px
      .event-name
        width 388px
        padding-left 12px
        box-sizing border-box
        display inline-block
        font-size 16px
        a
          color #333333
        a:hover
          color #3CADF4
      .list-index
        font-size 16px
        text-align center
        display inline-block
        width 33px
        color #919191
      .event-count
        width 81px
        box-sizing border-box
        display inline-block
        font-size 16px
        text-align center
</style>